<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
    <fieldset>
        <legend>事件对象（event object对象）</legend>
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <span>span2</span>
        <br/>
        <a href="javascript:void(0);" id="testA">解绑按钮点击事件</a>
        <br/>
        文本框1：<input type="text" id="txt1"><br/>
        文本框2：<input type="text" id="txt2">
    </fieldset>
    <div style="height: 2000px;width: 100%">

    </div>
</body>
<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    /**
     * 所有的事件函数都可以传入event参数方便处理事件
     * (evnet object)属性方法：
         event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
         event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
         event.type 　　//事件的类型
         event.which 　 //按下了哪一个键
         event.data 　　//在事件对象上绑定数据，然后传入事件处理函数
         event.target 　//事件针对的网页元素
         event.preventDefault() 　//阻止事件的默认行为(比如点击链接，会自动打开新页面)
         event.stopPropagation()  //停止事件向上层元素冒泡
     */
    $(function () {

        /**
         * jQuery绑定元素事件的方法有bind,on，两者达到的效果是一样的
         */
        $("#btn1").bind("click",function (event) {//绑定单击事件
            console.log(event);
           alert($(this).text()+event.type);
        });

        /**
         * 使用bind方法给ID为btn1的按钮同时绑定多个事件，参数格式：{"事件名称1":事件处理函数1,事件名称2":事件处理函数2,...}
         */
        $("#btn1").bind({
           "mouseover":function (event) {
               console.log("mouseover事件——当鼠标经过时触发"+event.type);
           }, "mouseout":function (event) {
               console.log("mouseout事件——当鼠标离开时触发"+event.type);
            },"mousedown":function (event) {
                console.log("mousedown事件——当按下鼠标时触发"+event.type);
            },"mouseup":function (event) {
                console.log("mouseup事件——元素上放松鼠标按钮时触发"+event.type);
            },"mousemove":function (event) {
                console.log("mousemove事件——当鼠标指针在指定的元素中移动时触发"+event.type);
            }
        });

        $("#btn2").on("dblclick",function (event) {//绑定双击事件
            alert($(this).text()+"(双击事件)"+event.type);
        });

        $("#btn2").on({
            "mouseover":function (event) {
                console.log("mouseover事件——当鼠标经过时触发"+event.type);
            }, "mouseout":function (event) {
                console.log("mouseout事件——当鼠标离开时触发"+event.type);
            },"mousedown":function (event) {
                console.log("mousedown事件——当按下鼠标时触发"+event.type);
            },"mouseup":function (event) {
                console.log("mouseup事件——元素上放松鼠标按钮时触发"+event.type);
            },"mousemove":function (event) {
                console.log("mousemove事件——当鼠标指针在指定的元素中移动时触发"+event.type);
            }
        });

        $("p").on("click",function (event) {
            alert($(this).text()+event.type);
        });

        //one方法用于绑定一个一次性的事件处理函数
        $("span").one("click",function (event) {
            alert($(this).text()+event.type);
        });

        $("#testA").click(function (event) {
            console.log(event.type);
            $("button").unbind();//使用unbind方法解绑所有事件
            //$("button").unbind("click");//使用unbind方法解绑指定事件，如这里就是指解绑click事件
        });


        $("#txt1").focus(function (event) {//元素获得焦点时,触发 focus 事件
            console.log("元素获得焦点时,触发 focus 事件"+event.type);
        }).blur(function (event) { //元素失去焦点时,触发 blur事件
            console.log("元素失去焦点时,触发 blur事件"+event.type);
        }).change(function (event) {//当元素的值发生改变时触发事件
            console.log("当元素的值发生改变时触发事件"+event.type);
        }).select(function (event) { //当input 元素中的文本被选择时触发事件
            console.log("当input 元素中的文本被选择时触发事件"+event.type);
        }).keyup(function (event) { //当键盘被松开时触发事件
            console.log("当按钮被松开时触发事件"+event.type);
        });

        $("#txt2").on({
            "focus":function (event) {
                console.log("元素获得焦点时,触发 focus 事件"+event.type);
            }, "blur":function (event) {
                console.log("元素失去焦点时,触发 blur事件"+event.type);
            },"change":function (event) {
                console.log("当元素的值发生改变时触发事件"+event.type);
            },"select":function (event) {
                console.log("当input 元素中的文本被选择时触发事件"+event.type);
            },"keyup":function (event) {
                console.log("当键盘被松开时触发事件"+event.type);
            }
        });

        $(window).scroll(function (event) {//当用户滚动时触发事件
            console.log("当用户拖动或者使用鼠标滚轮滚动浏览器页面滚动条时触发事件"+event.type);
        });
        $(window).resize(function (event) {//当调整浏览器窗口的大小时触发事件
            console.log("当调整浏览器窗口的大小时触发事件"+event.type);
        }) ;
        $(window).keydown(function (event) {//当键盘或按钮被按下时触发事件
            console.log("当键盘被按下时触发事件"+event.type);
        });
        $(window).keypress(function (event) { //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
            console.log("当键盘或按钮被按下时触发事件,每输入一个字符都触发一次"+event.type);
        });
        $(window).keyup(function (event) { //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
            console.log("当键盘被抬起时触发事件"+event.type);
        });
    });

</script>
</html>